<template>
  <div>
    <div><button @click="shuffle">随机</button></div>
    <transition-group move-class="mmm" tag="div" class="wrap">
      <div class="items" v-for="item in list" :key="item.id">
        {{ item.number }}
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import _ from "lodash";
let list = ref(
  Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return {
      id: index,
      number: (index % 9) + 1,
    };
  })
);
console.log(list.value);
// 使用ladash 函数将数组顺序打乱 npm i --save lodash
//  需要装ts声明文件，防止ts报错 npm  i @types/lodash -D
const shuffle = () => {
  list.value = _.shuffle(list.value);
  console.log(list.value);
  
};
</script>

<style scoped>
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: calc(25px * 10 + 9px);
}
.items {
  margin: 0px;
  width: 25px;
  height: 25px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mmm{
  transition: all 1s;
}
</style>